<template>
    <div>

        <div class="add">
            <div v-if="success" class="alert alert-success" role="alert">{{message}}</div>
            <div v-if="fail" class="alert alert-success" role="alert">{{message}}</div>
            <form>
                <div class="form-group row" v-for="item in users" :key="item.chickenUserId">
                    <label for="exampleInputEmail1" class="col-4 col-form-label">{{item.userName}}</label>
                    <div class="col-8">
                        <input class="form-control" placeholder="请输入" v-model="item.level">
                    </div>
                </div>
                <button v-if="loaded" type="button" class="btn btn-secondary" @click="cancel">取消</button>
                <button v-if="loaded" type="button" class="btn btn-primary submitBtn" @click="submitData">提交</button>
            </form>
        </div>
        <!-- Modal -->
        <div class="modal" id="loading" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body">loading...</div>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
    .add {
        text-align: center;
        padding: 30px 20px;
    }

    .submitBtn {
        margin-left: 10px;
    }
</style>
<script>
    import * as axios from 'axios';
    import * as $ from 'jquery';

    export default {
        name: 'add',
        data() {
            return {
                success: false,
                fail: false,
                loaded: false,
                message: '',
                users: [],
            }
        },
        watch: {},
        methods: {
            cancel() {
                this.$router.push({
                    name: 'home',
                });
            },
            submitData() {
                $('#loading').modal('show')
                const data = this.users.map(v => {
                    return v;
                });
                axios({
                    method: 'post',
                    url: 'https://soccer.dqv5.com/api/info/chicken/record/saveMany',
                    data: data
                }).then(res => {
                    $('#loading').modal('hide')
                    this.success = true;
                    this.message = res.data
                    setTimeout(this.cancel, 1500)
                })
            },
            loadUsers() {
                axios({
                    url: 'https://soccer.dqv5.com/api/info/chicken/users'
                }).then(res => {
                    this.users = res.data
                    this.loaded = true;
                })
            }
        },
        mounted: function () {
            this.loadUsers();
        }
    }
</script>
